(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "mobile/services/shoppingService", "mobile/site", "mobile/controls/dataList", "mobile/controls/imageBox"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const shoppingService_1 = require("mobile/services/shoppingService");
    const site_1 = require("mobile/site");
    const dataList_1 = require("mobile/controls/dataList");
    const imageBox_1 = require("mobile/controls/imageBox");
    class FavorPage extends React.Component {
        constructor(props) {
            super(props);
            this.shop = this.props.createService(shoppingService_1.ShoppingService);
            this.unfavor = (event, item) => {
                let btn = event.target;
                return this.shop.unfavorProduct(item.ProductId).then(() => {
                    btn.style.opacity = '0';
                    setTimeout(() => {
                        btn.style.display = 'none';
                        btn.nextSibling.style.opacity = '1';
                    }, 400);
                });
            };
        }
        showProduct(productId) {
            this.props.app.redirect(`#home_product?id=${productId}`);
        }
        loadFavorProducts(pageIndex) {
            if (pageIndex > 0) {
                return Promise.resolve([]);
            }
            return this.shop.favorProducts().then(items => {
                return items;
            });
        }
        render() {
            return React.createElement(React.Fragment, null,
                React.createElement("header", null, site_1.defaultNavBar(this.props.source, { title: '我的收藏' })),
                React.createElement("section", { ref: o => o ? this.dataView = o : null },
                    React.createElement(dataList_1.DataList, { className: "container", loadData: this.loadFavorProducts.bind(this), dataItem: (o) => (React.createElement("div", { key: o.ProductId },
                            React.createElement("div", { className: "item row" },
                                React.createElement("div", { onClick: () => this.showProduct(o.ProductId), className: "col-xs-4" },
                                    React.createElement(imageBox_1.ImageBox, { src: o.ImageUrl, className: "img-responsive" })),
                                React.createElement("div", { className: "col-xs-8" },
                                    React.createElement("div", { onClick: () => this.showProduct(o.ProductId), className: "name" },
                                        React.createElement("div", null, o.ProductName)),
                                    React.createElement("button", { ref: `btn_${o.Id}`, onClick: (event) => this.unfavor(event, o), className: "pull-right" },
                                        React.createElement("i", { className: "icon-heart" }),
                                        " \u53D6\u6D88\u6536\u85CF"),
                                    React.createElement("label", { className: "pull-right" }, "\u5DF2\u53D6\u6D88"))),
                            React.createElement("hr", { className: "row" }))), emptyItem: React.createElement("div", { className: "norecords" },
                            React.createElement("div", { className: "icon" },
                                React.createElement("i", { className: "icon-heart-empty" })),
                            React.createElement("h4", { className: "text" }, "\u4F60\u8FD8\u6CA1\u6709\u6DFB\u52A0\u6536\u85CF\u54E6")) })));
        }
    }
    exports.default = FavorPage;
});
